<template>
  <div class="bs-scale-carouse">
    <div class="hd inner">
      <div class="left-arrow" @click="changeImage(-1)"></div>
      <div class="right-arrow" @click="changeImage(1)"></div>
      <ul class="item-wrap">
        <li v-for="(item, i) in list" :key="i" :style="'z-index:' +item.zindex+';left:' + item.left + ';transform:scale('+ item.scale +')'">
          <img :src="item.src" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import img1 from '../assets/images/index/AI智能终端设备.jpg'
import img2 from '../assets/images/index/AI智能终端设备.jpg'
import img3 from '../assets/images/index/AI智能终端设备.jpg'

export default {
  data () {
    return {
      list: [
        {
          src: img1,
          scale: 1,
          zindex:1,
          left: '3%'
        },
        {
          src: img2,
          scale: 1.5,
          zindex:2,
          left:'33%'
        },
        {
          src: img3,
          scale: 1,
          zindex:1,
          left: '66%'
        }
      ]
    }
  },
  methods: {
    changeImage(n) {
      let temp = []
      const len = this.list.length
      if (n > 0) {
        this.list.forEach((v, i) => {
          i === (len - 1) ? temp[i] = this.list[0] : temp[i] = this.list[i + 1]

        })
      } else {
        this.list.forEach((v, i) => {
          i === 0 ? temp[i] = this.list[len - 1] : temp[i] = this.list[i - 1]
        })
      }
      this.list = temp
      console.log(temp)
    }
  }
}
</script>

<style lang="less" scoped>
.bs-scale-carouse{
  .inner {
    position: relative;
    height: 400px;
  }
  .left-arrow, .right-arrow{
    width: 52px;
    height: 127px;
    position: absolute;
    top: 50%;
    transform: translateY(-127px);
    cursor: pointer;
  }
  .left-arrow{
    background: url(../assets/images/index/箭头向左.png) no-repeat;
    left: -52px;
  }
  .right-arrow{
    background: url(../assets/images/index/箭头向右.png) no-repeat;
    right: -52px;
  }
  .item-wrap{
    overflow: hidden;
    padding: 50px 50px;
    position: relative;
    height: 400px;
    li{
      position: absolute;
      width: 30%;
      transition: all 0.6s;
      img{
        width: 100%;
        // height: 200px;
      }
    }
  }
}
</style>
